<template>
    <div>
        <!--后台顶栏-->
        <div class="topbanner" style="display: flex;align-items: center;padding-right: 40px">

            <div class="logo">
                21cake后台管理
            </div>

            <el-dropdown>
                     <span class="el-dropdown-link" style="color: #fff;width: 30px;">
                         {{username}} <i class="el-icon-caret-bottom"></i>
                    </span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item>
                        <router-link to="/login" tag="div" replace @click.native="tologin">退出</router-link>
                    </el-dropdown-item>
                    <el-dropdown-item>
                        <router-link to="/home/main" tag="div" @click.native="closedefault">
                            主页
                        </router-link>
                    </el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>

        <!--后台侧边栏-->
        <div class="contant">

            <div class="left">
                <el-col :span="12">
                    <el-menu
                            :default-active="defaultActive"
                            class="el-menu-vertical-demo"
                            @open="handleOpen"
                            @close="handleClose"
                            background-color="#304156"
                            text-color="#fff"
                            active-text-color="#409EFF"
                            :router="true"
                            :default-openeds="defaultOpen"
                            @select="handleSelect">


                        <el-menu-item index="/home/main" @click="closedefault"
                                      style="background-color: rgb(48, 65, 86) "
                                      class="home">
                            <i class="el-icon-menu"></i>
                            <span slot="title">主页</span>
                        </el-menu-item>


                        <el-submenu index="0">
                            <template slot="title">
                                <i class="el-icon-user-solid"></i>
                                <span>用户管理</span>
                            </template>
                            <el-menu-item-group>
                                <el-menu-item index="/home/user">用户列表</el-menu-item>
                            </el-menu-item-group>
                        </el-submenu>


                        <el-submenu index="1">
                            <template slot="title">
                                <i class="el-icon-location"></i>
                                <span>产品管理</span>
                            </template>

                            <el-menu-item-group>

                                <el-menu-item index="/home/table">产品列表</el-menu-item>
                                <el-menu-item index="/home/details">订单信息</el-menu-item>

                            </el-menu-item-group>

                        </el-submenu>


                        <el-submenu index="2">
                            <template slot="title">
                                <i class="el-icon-s-order"></i>
                                <span>订单管理</span>
                            </template>
                            <el-menu-item-group>
                                <el-menu-item index="/home/order">查看订单</el-menu-item>
                                <el-menu-item index="/home/return_goods">退货管理</el-menu-item>
                            </el-menu-item-group>
                        </el-submenu>

                        <el-submenu index="3">
                            <template slot="title">
                                <i class="el-icon-document-copy"></i>
                                <span>供货商管理</span>
                            </template>
                            <el-menu-item-group>
                                <el-menu-item index="/home/watch_gong">查看供货商</el-menu-item>
                            </el-menu-item-group>
                        </el-submenu>

                        <el-submenu index="4">
                            <template slot="title">
                                <i class="el-icon-document-copy"></i>
                                <span>营销管理</span>
                            </template>
                            <el-menu-item-group>
                                <el-menu-item index="/home/miaosha">秒杀管理</el-menu-item>
                            </el-menu-item-group>
                        </el-submenu>
                    </el-menu>
                </el-col>
            </div>
            <div class="right">
                <transition name="el-fade-in" mode="out-in">
                    <router-view></router-view>
                </transition>
            </div>
        </div>
    </div>
</template>

<script>
    import mytable from '../compents/details/table'
    import unil from '@/until'

    export default {
        methods: {
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            },
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            },
            closedefault() {
                this.$router.push('/home/main')
                this.defaultOpen = ['/home/main']
            },
            tologin() {
                unil.locastorage.remove()
            }
        },
        data() {
            return {
                defaultActive: '/home/main',
                defaultOpen: [],
                isCollapse: true,
                username: ''
            }
        },
        components: {
            mytable
        },
        created() {
            this.username = unil.locastorage.get()
            this.defaultActive = this.$route.path
        }
    }
</script>

<style lang="scss">
    .topbanner {
        width: 100%;
        height: 61px;
        background-color: #304156;
        display: flex;
        padding: 0 25px;
        justify-content: space-between;
        box-sizing: border-box;

        .logo {
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            font-size: 20px;
            color: #fff;
        }
    }

    .contant {
        width: 100vw;
        height: calc(100vh - 61px);
        display: flex;

        .left {
            height: 100%;
            background-color: #304156;
            width: 200px;
        }

        .right {
            flex: 1;
            background-color: #F5F7F9;
            padding: 20px;
            box-sizing: border-box;
            overflow-y: scroll;
        }
    }

    .el-col-12 {
        width: 100%;
    }

    .el-menu {
        border: none;
    }

    .el-menu.el-menu--horizontal {
        border-bottom: none;
    }


    .el-menu-item-group__title {
        padding: 0 !important;
    }

    .el-submenu {
        .el-menu-item {
            background-color: #1f2d3d !important;
        }

        .el-menu-item:hover {
            background-color: #001528 !important;
        }
    }
</style>
